<template>
    <div>
        <div style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);height: 90px;width: 100%;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <div class="breadcrumb">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>小区管理</el-breadcrumb-item>
                    <el-breadcrumb-item>绑定业主</el-breadcrumb-item>
                </div>
            </el-breadcrumb>
        </div>
        <div class="selectdiv">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" >
                <el-form-item>
                    <el-input v-model="formInline.user" placeholder="输入姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="formInline.id_num" placeholder="输入电话号码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div>

            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="id_num"
                        label="身份证号"
                        min-width="20%">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        min-width="10%">
                </el-table-column>
                <el-table-column
                        prop="tel"
                        label="电话"
                        min-width="20%">
                </el-table-column>

                <el-table-column
                        fixed="right"
                        label="操作"
                        min-width="10%">
                    <el-button type="text" @click="dialogEdit = true">绑定</el-button>

                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination
                    large
                    layout="prev, pager, next"
                    :total="50">
            </el-pagination>
        </div>
        <el-dialog
                title="提示"
                :visible.sync="dialogEdit"
                width="34%"
                :before-close="handleClose">
            <div >
                <el-form :inline="true" :model="bound" class="demo-form-inline" :label-position="labelPosition" label-width="100px">
                    <el-form-item label="绑定单元号">
                        <el-input v-model="bound.unit" placeholder="输入单元号" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="绑定房间编号" >
                        <el-input v-model="bound.name" placeholder="输入房间编号" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="绑定使用日期" >
                        <el-date-picker
                                v-model="bound.date"
                                type="date"
                                placeholder="选择日期"
                                style="width: 200px;">
                        </el-date-picker></el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogEdit = false">取 消</el-button>
            <el-button type="primary" @click="dialogEdit = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            onSubmit() {
                console.log('submit!');
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
        },

        data() {

            return {
                labelPosition:'right',
                tableData: [{
                    id_num: '111111111111111111',
                    name: '王小虎',
                    age: '18',
                    tel: '123134353',
                    address: '上海市普陀区金沙江路 1518 弄',
                    position: '客服'
                }, {
                    id_num: '111111111111111111',
                    name: '王小虎',
                    age: '18',
                    tel: '123134353',
                    address: '上海市普陀区金沙江路 1518 弄',
                    position: '客服'
                }, {
                    id_num: '111111111111111111',
                    name: '王小虎',
                    age: '18',
                    tel: '123134353',
                    address: '上海市普陀区金沙江路 1518 弄',
                    position: '客服'
                }, {
                    id_num: '111111111111111111',
                    name: '王小虎',
                    age: '18',
                    tel: '123134353',
                    address: '上海市普陀区金江路 1518 弄',
                    position: '客服'
                }],
                bound:{
                    unit:'',
                    name:'',
                    date:'',
                },
                dialogEdit: false,
                dialogCreate:false,
                formInline: {
                    user: '',
                    id_num: ''
                }
            }


        },
    }
</script>

<style scoped>

    .selectdiv {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .pagination {
        position: absolute;
        right: 100px;
        margin-top: 10px;
    }

    .breadcrumb {
        margin-top: 29px;
        margin-left: 20px;
        font-size: 25px
    }

</style>

